import React from 'react'
import { Input, DatePicker, Select, Table, Form, Button } from 'antd'
import styles from './LoginLog.less'
import propTypes from 'prop-types'
// dva
import gql from 'graphql-tag'
import GraphqlComponent from 'DHBStatement/libs/components/GraphqlComponent'
import { connect } from 'dva'
import Header from '../../components/Header/index'

const FormItem = Form.Item

const headerData = {
  title: '登录日志',
  hasPopover: true,
  popoverContent: <div>
    <p>每个账号登录你系统的日志，监管你账号的安全性</p>
  </div>,
  hasSubNav: true,
  subNavItem: [
    {
      title: '首页',
      link: true
    },
    {
      title: '系统',
      link: false
    },
    {
      title: '账号管理',
      link: true
    }
  ]
}
const AGQL = (props) => componet => GraphqlComponent(componet, props, 'system')

// 搜索及日期部分
const Search = Input.Search
const Option = Select.Option
const { RangePicker } = DatePicker
function onChange (value, dateString) {
  console.log('Selected Time: ', value)
  console.log('Formatted Selected Time: ', dateString)
}

// table部分
const columns = [{
  title: '',
  dataIndex: 'index',
  width: 50,
  render: (text, record, index) => index + 1
}, {
  title: '时间',
  dataIndex: 'loginDate',
  width: 200
}, {
  title: '登录账号',
  dataIndex: 'accountsName',
  width: 150
}, {
  title: '姓名',
  dataIndex: 'trueName',
  width: 150
}, {
  title: '地区',
  dataIndex: 'loginArea',
  width: 250
}, {
  title: 'IP',
  dataIndex: 'loginIp',
  width: 250
}, {
  title: '设备',
  dataIndex: 'loginSource'
}]

function LoginLog ({ loading, variables, data, refetch, form: { getFieldDecorator, validateFields } }) {
  const { loginLoglist = {} } = data
  const { list = [], total = 0 } = loginLoglist

  const handleSearch = () => {
    validateFields((err, data) => {
      if (!err) {
        let args = { accountsType: data.accountsType }
        if (data.time) {
          args.startTime = data.time[0].format('YYYY-MM-DD')
          args.startTimeEnd = data.time[1].format('YYYY-MM-DD')
        }
        refetch(Object.assign({}, variables, { page: 1, pageSize: 15, kw: data.kw, ...args }))
      }
    })
  }

  const handlePageChange = (page, pageSize) => {
    refetch(Object.assign({}, variables, { page, pageSize }))
  }

  return (
    <div>
      <Header header={headerData} />
      <div className={styles.container}>
        {/* 搜索及日期 */}
        <div className={styles.searchDiv}>
          <Form layout='inline'>
            <FormItem>
              {
                getFieldDecorator('kw', { initialValue: '' })(
                  <Search
                    placeholder='账号搜索'
                    onSearch={value => console.log(value)}
                  />)
              }
            </FormItem>
            <FormItem>
              {
                getFieldDecorator('time')(
                  <RangePicker
                    showTime={{ format: 'HH:mm' }}
                    format='YYYY-MM-DD HH:mm'
                    placeholder={['开始日期', '截止日期']}
                    onChange={onChange}
                    style={{ width: 330 }}
                  />)
              }
            </FormItem>
            <FormItem>
              {
                getFieldDecorator('accountsType', { initialValue: 'manager' })(
                  <Select style={{ width: 120 }}>
                    <Option value=''>全部</Option>
                    <Option value='manager'>管理端用户</Option>
                    <Option value='agency'>订货端用户</Option>
                  </Select>
                )
              }
            </FormItem>
            <FormItem>
              <Button type='primary' onClick={() => handleSearch()}>搜索</Button>
            </FormItem>
          </Form>
        </div>
        {/* table部分 */}
        <Table size='middle' loading={loading} columns={columns} dataSource={list} pagination={{ pageSize: variables.pageSize, current: variables.page, total, onChange: (page, pageSize) => handlePageChange(page, pageSize) }} scroll={{ y: 600 }} />,
      </div>
    </div>
  )
}

LoginLog.propTypes = {
  loading: propTypes.bool,
  data: propTypes.object,
  employeeAcount: propTypes.object,
  form: propTypes.object,
  refetch: propTypes.func,
  variables: propTypes.object
}

const mapStateToProps = ({ employeeAcount }) => ({ employeeAcount })

export default connect(mapStateToProps)(AGQL({
  query: gql`
    query example($page: Int, $pageSize: Int, $kw: String, $startTime: String, $startTimeEnd: String, $accountsType: String) {
      loginLoglist(page: $page, pageSize: $pageSize, kw: $kw, startTime: $startTime, startTimeEnd: $startTimeEnd, accountsType: $accountsType) {
        pageSize
        page
        total
        list {
          key
          accountsName
          trueName
          loginIp
          loginArea
          loginDate
          loginSource
        }
      }
    }
  `,
  variables: {
    page: 1,
    pageSize: 15,
    kw: ''
  }
})(Form.create()(LoginLog)))
